<template>
    <div style="width: 100%;height: 100%;padding: 1px;display: flex;flex-direction: row;position:relative;">
        <div style="width: 100%;height: 100%;background-color: skyblue;" ref="topo001"></div>
        <div style="position: absolute;left: 1px;top: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="create" style="width: 100px;margin-left: 0 !important;">
                节点自转
            </el-button>
            <el-button size="mini" round @click="animationRotate.pause()" style="width: 100px;margin-left: 0 !important;">
                暂停
            </el-button>
            <el-button size="mini" round @click="animationRotate.continue()" style="width: 100px;margin-left: 0 !important;">
                继续
            </el-button>
            <el-button size="mini" round @click="animationRotate.cancel()" style="width: 100px;margin-left: 0 !important;">
                取消
            </el-button>
        </div>
        <div style="position: absolute;left: 1px;bottom: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="create2" style="width: 100px;margin-left: 0 !important;">
                节点掉落
            </el-button>
            <el-button size="mini" round @click="create3" style="width: 100px;margin-left: 0 !important;">
                线律动
            </el-button>
        </div>
    </div>
</template>
<script>
    import {Stage, Layer, Node, Link} from '@jtopo/core';
    import {RipplingNode} from '@jtopo/extensions';
    import {Editor} from '@jtopo/editor';

    export default {
        data() {
            return {
                logList: [],
                stage: null,
                layer: null,
                animationRotate: null,
            }
        },
        mounted() {
            this.initTopo();
        },
        methods: {
            create3() {
                let link = this.layer.querySelector('Link[text="Link"]');
                if (link) {
                    // 使用'动效'系统
                    let effectSystem = this.stage.effectSystem;
                    // 让link流动起来
                    effectSystem.flow(link).play();
                    // 创建一个'涟漪'动效节点
                    let blockNode = new Node('', 0, 0, 20, 10);
                    blockNode.draggable = false;
                    blockNode.setStyles({
                        backgroundColor: 'green',
                    });
                    link.addChild(blockNode);
                    // n在5000毫秒内，从0逐渐变为1
                    let animationSystem = this.stage.animationSystem;
                    animationSystem.anime({
                        from: 0, //节点定位到连线的起点（连线绑定的第一个节点 /fromNode的位置）
                        to: 1, //节点定位到连线的终点（连线绑定的第二个节点 /toNode的位置）
                        duration: 10000,
                        times: 1, //执行几次
                        // direction: 'alternate', //alternate: 交替来回
                        effect: 'easeInOutQuad',
                        update: function (n) {
                            blockNode.setOriginOnLink(n);
                        },
                    }).play();
                    let ripNode = new RipplingNode();
                    // 动效参数
                    ripNode.ae({
                        circleNumber: 2 // '圆圈'数量
                    });
                    // 样式
                    ripNode.setStyles({
                        lineWidth: 6,        // 扩散后线条最大宽度
                        strokeStyle: 'gray', // 涟漪颜色
                    });
                    blockNode.addChild(ripNode);
                }
            },
            create2() {
                let node = this.layer.querySelector('Node[text="To"]');
                if (node) {
                    // 使用动画系统
                    let animationSystem = this.stage.animationSystem;
                    // 模拟掉落, 从node当前y, 向下掉 200个像素
                    animationSystem.anime({
                        from: [node.y],
                        to: [node.y + 100],
                        update: (arr) => {
                            node.y = arr[0];
                        },
                        // 效果（缓动函数, 详见下一小节）
                        effect: 'easeOutBounce',
                        duration: 2000,
                    }).play();
                }
            },
            create() {
                let mainNode = this.layer.querySelector('Node[text="From"]');
                if (mainNode) {
                    // 使用动画系统
                    let animationSystem = this.stage.animationSystem;
                    // 创建一个动画实例：一个node对象在5秒内旋转一周（弧度：2*Math.PI)
                    this.animationRotate = animationSystem.anime({
                        // 变量n的开始
                        from: 0,
                        // 变量n结束
                        to: 2 * Math.PI, //一圈：2 * Math.PI
                        // 动画时间
                        duration: 1000 * 60, //整个动画完成时间（单位：毫秒）
                        // 每一帧的动画行为（这里是选择一个节点对象）
                        update: function (n) {
                            // 旋转节点
                            mainNode.rotate(n);
                        }
                    });
                    // 播放
                    this.animationRotate.play();
                }
            },
            //初始化+事件学习
            initTopo() {
                this.stage = new Stage(this.$refs.topo001);
                this.layer = new Layer(this.stage);
                const fromNode = new Node('From', 0, 0, 40, 40);
                const toNode = new Node('To', 300, -300, 40, 40);
                // 设置节点填充颜色
                fromNode.setStyles({
                    fillStyle: 'orange'
                });
                toNode.setStyles({
                    fillStyle: 'blue'
                });
                const link = new Link('Link', fromNode, toNode);
                this.layer.addChild(link);
                this.layer.addChild(fromNode);
                this.layer.addChild(toNode);
                // this.stage.show();
            },
        },
    }
</script>